 * {
     margin: 0;
     padding: 0;
     border: 0;
     font-size: 14px;
 }
 a {
     font-size: 0;
     text-decoration: none;
 }
 body {
     width: 100%;
     min-width: 1300px;
     height: 100%;
 }
 /* 轮播图部分开始 */
  /* 设置存放轮播图片的容器: 尺寸,位置等 */
.banner{
    height:460px; /* 尺寸 */
    margin:0px auto; /* 位置 */
    overflow: hidden; /* 溢出隐藏,避免图片移动时依然显示 */
    position: relative;/* 为内存图片提供参考对象 */
    }
    
.init,.img1,.img2,.img3,.img4{
    position: absolute; /*使图片自动叠放在1块  */
    left:-100%;/* 图片全部隐藏 */
    width:100%;
    height:460px; /* 尺寸 */
    background-position: center top;
    }
.init{
    left:0px;
    background-image: url("./../img/by1.jpg");
    }
.img1{
    background-image: url("./../img/by2.jpg");
    }
.img2{
    background-image: url("./../img/by3.jpg");
    }
.img3{
    background-image: url("./../img/download.jpg");
    }
.img4{
    background-image: url("./../img/banner.jpg");
    }
 
.img1{
    animation-name: myanimation; /* 动画名 */
    animation-duration: 40s; /* 动画时长 */
    animation-delay: 8s;/* 动画延迟: 8[初始图片停留时间,此时图1准备进入] */
    animation-timing-function: linear; /* 动画速度: 匀速 */
    animation-iteration-count: infinite;/* 播放次数: 无限次 */
    }
.img2{
    animation-name: myanimation; /* 动画名 */
    animation-duration: 40s; /* 动画时长 */
    animation-delay: 18s;/* 动画延迟: 8[初始图片停留时间]+2[初始图离开,图1进入视图区]+8[图1停留时间,此时图2准备进入] */
    animation-timing-function: linear; /* 动画速度: 匀速 */
    animation-iteration-count: infinite;/* 播放次数: 无限次 */
    }
.img3{
    animation-name: myanimation;
    animation-duration: 40s;
    animation-delay: 28s;/* 动画延迟: 8[初始图片停留时间]+2[初始图离开,图1进入视图区]+8[图1停留时间,此时图2准备进入]+2[图2进入视图区,同时图1离开]+8[图2停留时间,此时图3准备进入] */
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    }
.img4{
    animation-name: myanimation;
    animation-duration: 40s;
    animation-delay: 38s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    }
    /* 总耗时: 2+8 +2+8 +2+8 +2+8=40S */
    @keyframes myanimation{
    	/* 初始位置:不耗时 */
	    0%{
	    left:100%;
	    }
	    /* 转入视图区: 2S */
	    5%{left:0px;}
	    /* 停留: 8S */
	    25%{left:0px;}
	    /* 离开视图区:2S */
	    30%{
	    left:-100%;
	    }
	    /* 等待下次: 8+2 + 8+2 +8=28 */
	    100%{
	    left:-100%;
	    }
    }
    
    /* 设置初始图片: 直接停留8秒,然后2秒离开.[不再循环] */
    .init{
    animation-name: init;
    animation-duration: 10s;
    animation-timing-function: linear;
    }
    @keyframes init{
    	/* 初始位置:不耗时 */
	    0%{
	    left:0px;
	    }
	    /* 停留: 8S */
	    80%{left:0px;}
	    /* 离开视图区:2S */
	    100%{
	    left:-100%;
	    }
    }
 

 /* 轮播图部分结束 */
 /* 顶部导航开始  */
#a1 {
    width: 100%;
    height: 58px;
    background-color: #191d3a;
}
.a1-a1 {
    width: 1000px;
    height: 58px;
    position: relative;
    margin: 0 auto;
}
.a1-a1 img {
    margin-left: 20px;
}
.a1-a2 {
    width: 800px;
    position: absolute;
    display: inline-block;
    margin-left: 42px;
    top: 0;
}
.a1-a2 ul li {
    width: 85px;
    height: 58px;
    float: left;
    text-align: center;
    color: #818496;
    font: 1.166em/58px "Microsoft YaHei", "simhei";
    list-style-type: none;
}
.a1-a2 ul li:hover {
    background-color: #252947;
    color: #e2e4ed;
}
.a1-a2 ul .aaaaaaa {
    color: white;
    background-color: #252947;
}
.a1-a1 a {
    width: 98px;
    height: 32px;
    display: inline-block;
    margin: 12px 0 0 120px;
    border: 1px solid #3aca7a;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-color: #38b774;
    font-size: 1.166em;
    color: #fff;
    text-align: center;
    line-height: 32px;
    
}
/* 顶部导航结束 */



/* 轮播图开始 */
#a2 {
    width: 100%;
    height: 460px;
    text-align: center;
    position: relative;
}

/* .a2-a img {
    width: 100%;
    height: 460px;
} */
/* 5个小圆点和三个小圆点开始 */
.a2-bb {
    width: 120px;
    margin-left: -60px;
}
.a2-b-2 {
    background-color: #fff;
}



/* 小圆点的通用样式开始 */
.a2-b {
    height: 15px;
    display: block;
    position: absolute;
    top: 440px;
    left: 50%;
}
.a2-b-1 {
    margin-right: 15px;
    background-color: #fff;
}
/* .a2-b-2 {·
    opacity: 0.3;
} */
.a2-b ul li {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    overflow: hidden;
    float: left;
    list-style-type: none;
    text-indent: -9999px;
    /* 光标 */
    cursor: pointer;
}
/* 小圆点的通用样式结束 */



/* 5个小圆点和三个小圆点结束 */
/* 轮播图结束 */


/* 下面主题部分开始 */


/* 四个轮播的小块开始  */
#a3 {
    width: 1000px;
    height: 700px;
    margin: 0 auto;
    position: relative;
    /* background-color: red; */
}
.a3-a {
    width: 1000px;
    height: 248px;
    position: relative;
    padding-top: 50px;
    margin-bottom: 35px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.a3-a-1 {
    width: 218px;
    height: 200px;
}
.a3-a-1 img {
    width: 218px;
    height: 130px;
}
.a3-a-1 a {
    text-align: center;
}
.a3-a-1 h5 {
    margin-top: -10px;
    color: #000;
}
.a3-a-1 span {
    display: inline-block;
    color: #33b972;
    padding-right: 15px;
    background: url('./../img/sanjiaoxing.png') no-repeat right 6px;
    margin: 12px 0px;
}

.a3-a-1-1 {
    width: 218px;
    height: 50px;
    padding-top: 23px;
    position: absolute;
    top: 180px;
}

.z1:hover .a3-a-1-1 {
    background-color: #33b972;
}
.z1:hover .a3-a-1-1 span{
    background: url('./../img/sanjiaoaaa.png') no-repeat right 6px;
    color: white;
}
.z1:hover .a3-a-1-1 h5{
    color: white;
}


.z2:hover .a3-a-1-1 {
    background-color: #33b972;
}
.z2:hover .a3-a-1-1 span{
    background: url('./../img/sanjiaoaaa.png') no-repeat right 6px;
    color: white;
}
.z2:hover .a3-a-1-1 h5{
    color: white;
}


.z3:hover .a3-a-1-1 {
    background-color: #33b972;
}
.z3:hover .a3-a-1-1 span{
    background: url('./../img/sanjiaoaaa.png') no-repeat right 6px;
    color: white;
}
.z3:hover .a3-a-1-1 h5{
    color: white;
}

.z5:hover .a3-a-1-1 {
    background-color: #33b972;
}
.z5:hover .a3-a-1-1 span{
    background: url('./../img/sanjiaoaaa.png') no-repeat right 6px;
    color: white;
}
.z5:hover .a3-a-1-1 h5{
    color: white;
}
/* 博雅新闻社会招聘上面细线开始*/

.a3-b {
    width: 1000px;
    height: 1px;
    margin-top: -54px;
    border-top: 1px solid gray;
}
/* 博雅新闻社会招聘上面细线结束 */



/* 调整下面三个小圆点的位置开始 */
.a3-c {
    top: 273px;
    background-color: white;
    padding: 0px 12px;
    margin-left: -45px;
}

.a3-c-a {
    background-color: #b5c0cb;
}
/* 调整下面三个小圆点的位置结束 */

/* 四个轮播的小块结束  */




/* 下面左侧的博雅新闻开始 */
.a3-d {
    width: 500px;
    height: 310px;
    float: left;
    position: relative;
    margin-top: 50px;
    background-color: tan;
}

.a3-dd {
    width: 284px;
    height: 70px;
    position: absolute;
    top: 40px;
    right: 216px;
    background: url('./../img/more1.png') no-repeat right top;
}
.a3-dd:hover {
    background: url('./../img/more2.png') no-repeat right top;
}
.a3-d ul {
    position: absolute;
    top: 118px;
    left: 50%;
    margin-left: -230px;
}
.a3-d ul li {
    width: 460px;
    height: 38.5px;
    box-sizing: border-box;
    border-bottom: 1px gray solid;
    list-style-type: none;
}

#a3 .a3-d ul li span {
    float: right;
    margin-top: 6px;
}
#a3 .a3-d ul li a {
    width: 408px;
    height: 29px;
    margin: 9.5px 0;
    color: #444866;
    line-height: 29px;
    display: block;
    font-size: 1.11em;
    font-family: "Hiragino Sans GB", "Microsoft YaHei", "宋体", Arial, Tahoma, Helvetica, Geneva, sans-serif;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

#a3 .a3-d ul li a:hover {
    color: #38b774;;
}
/* 下面左侧的博野新闻结束  */



/* 下面右侧的社会招聘开始  */
.a3-e {
    width: 500px;
    height: 310px;
    float: left;
    position: relative;
    margin-top: 50px;
    background-color: tan;
}
.a3-e-1 {
    width: 284px;
    height: 70px;
    position: absolute;
    top: 40px;
    right: 216px;
    background: url('./../img/more2.png') no-repeat right top;
}
.a3-e-1:hover {
    background: url('./../img/more1.png') no-repeat right top;
}
.a3-e-1 h2 {
    font-size: 28px;
    display: block;
    line-height: 34px;
    font-weight: 700;
    color: white;
    margin-left: 80px;
}
.a3-e-1 p {
    color: white;
    margin-left: 80px;
}
.a3-e h3 {
    color: #fff;
    font-size: 1em;
    position: absolute;
    top: 121px;
    left: 21px;
}
.a3-e ul {
    position: absolute;
    top: 150px;
    left: 21px;
    margin-top: -12px;
    list-style-type: none;
    }
.a3-e ul li {
    width: 305px;
    height: 29px;
    padding: 4px 0;

    border-bottom: 1px solid #6fdea3;
}
.a3-e ul li a {
    padding: 10px 0;
    font-size: 1em;
    font-family: "Hiragino Sans GB", "Microsoft YaHei", "宋体", Arial, Tahoma, Helvetica, Geneva, sans-serif;
    line-height: 29px;
    height: 29px;
    white-space: nowrap;
    overflow: hidden;
    color: white;
}
/* 下面右侧的社会招聘结束  */



/* 下面主题部分结束 */

/* 底部导航栏开始  */
#a5 {
    width: 100%;
    height: 190px;
    background-color: #191d3a;
    }
.a5-a {
    width: 1000px;
    height: 190px;
    margin: 0 auto;
    position: relative;
}
.a5-a .a5-a-1 span {
    width: 1000px;
    height: 49.6px;
    display: block;
    padding-top: 35px;
    color: #6c6e7e;
}
.a5-a .a5-a-1 span a{
    font-size: 12px;
    color: #6c6e7e;
}
.a5-a .a5-a-1 span a:hover {
    color: white;
}
.a5-a .a5-a-2 span {
    width: 1000px;
    height: 49.6px;
    display: block;
    color: #6c6e7e;
}
.a5-a .a5-a-2 span a{
    font-size: 12px;
    color: #6c6e7e;
}

.a5-a .a5-a-3 span {
    width: 1000px;
    height: 49.6px;
    display: block;
    color: #6c6e7e;
}
.a5-a .a5-a-3 span a{
    font-size: 12px;
    color: #6c6e7e;
}
.a5-a .a5-a-3 span a img{
    width: 20px;
    height: 20px;
}
.a5-a-5 a{
    width: 68px;
    height: 29px;
    display: block;
    position: fixed;
    right: 10%;
    bottom: 160px;
    background: url('./../img/top\ \(2\).png') no-repeat right top;
}
.a5-a-5 a:hover {
    background: url('./../img/top\ \(2\).png') no-repeat 0px -40px;
}
/* 当屏幕缩小到1350像素以下时，使用了固定布局的top按钮将会从距离右边框的10%移到5% */
@media screen and (max-width: 1350px) {
    .a5-a-5 a {
        right: 2%
    }
}
/* 底部导航栏结束  */

